{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Curate Mappings{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        .btn-space {
            margin-top: 15px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'/>
{% endblock %}

{% block scripts %}
    {{ super() }}
    {% include "dependencies/common.html" %}

    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        // Initializes popover
        $(function () {
            $('[data-toggle="popover"]').popover({
                placement: 'top',
                trigger: 'hover'
            })
        });

        $(document).ready(function () {

            // Autocompletion in the first input
            $('#input-1').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/api/autocompletion/pathway_name",
                        dataType: "json",
                        data: {
                            resource: $('#select-1').find(":selected").val(),
                            q: request.term
                        },
                        success: function (data) {
                            response(data); // functionName
                        }
                    });
                }, minLength: 2
            });

            // Autocompletion in the first input
            $('#input-2').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/api/autocompletion/pathway_name",
                        dataType: "json",
                        data: {
                            resource: $('#select-2').find(":selected").val(),
                            q: request.term
                        },
                        success: function (data) {
                            response(data); // functionName
                        }
                    });
                }, minLength: 2
            });
        });

    </script>


{% endblock %}


{% import "meta/macros.html" as compath %}

{% block content %}
    <div class="container" style="margin-top: 50px">
        {{ util.flashed_messages(dismissible=True, container=False) }}

        <div class="panel panel-default">
            <div class="panel-heading">Establish New Pathway Mappings</div>
            <div class="panel-body">
                <form id="curation-form" action="{{ url_for("curation.process_mapping") }}">
                    <p>This form allows you to establish mappings between pathway pairs. First, select the resource
                        of the pathway you want to map, and then start typing the pathway in the left-side input which
                        will be automatically autocompleted. The mappings created will be automatically added to the
                        <a href="{{ url_for('curation.catalog') }}">mapping catalog</a>, where users can vote for the
                        mappings. After 3 users have approved a mapping, the mapping will be added to the curated
                        mapping list.
                    </p>

                    <p>ComPath allows for two types of mappings. More description about the mapping types and protocol
                        followed can be found <a href="{{ url_for('ui.curation_protocol') }}">here</a>.
                    </p>
                    <ul>
                        <li><b>equivalentTo</b>. This mapping type reflects that the pathway pair shares a high
                            similarity as well as the same specific focus. E.g., "Allograft rejection - Homo sapiens
                            (human)" from KEGG equivalentTo "Allograft Rejection" from WikiPathways.
                        </li>
                        <li><b>isPartOf</b>. This type of mapping represents a hierarchical relationship between the two
                            pathways (e.g., pathway 1 (child) isPartOf pathway 2 (parent)). A real world example of this
                            mapping would be "Lipid metabolism" isPartOf "Metabolism".
                        </li>
                    </ul>

                    <div class="row">

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-2 col-md-2 col-lg-2">
                                <select type="text" class="form-control" name="resource-1" id="select-1">
                                    {% for manager in manager_names|sort %}
                                        {% if manager not in BLACK_LIST %}
                                            <option value="{{ manager }}">{{ compath.stylize_plugin_name(STYLED_NAMES, manager) }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <label class="sr-only" for="pathway">Pathways</label>
                                <input type="text" class="form-control" name="pathway-1" id="input-1"
                                       placeholder="Select the first Pathway">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-2 col-md-2 col-lg-2">
                                <select type="text" class="form-control" name="resource-2" id="select-2">
                                    {% for manager in manager_names|sort %}
                                        {% if manager not in BLACK_LIST %}
                                            <option value="{{ manager }}">{{ compath.stylize_plugin_name(STYLED_NAMES, manager) }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <label class="sr-only" for="pathway">Pathways</label>
                                <input type="text" class="form-control" name="pathway-2" id="input-2"
                                       placeholder="Select the second Pathway">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-3 col-md-3 col-lg-3">
                            <label for="mapping-type">
                            </label><select type="text" class="form-control" name="mapping-type" id="mapping-type">
                            <option value="isPartOf">isPartOf</option>
                            <option selected value="equivalentTo">equivalentTo</option>
                        </select>
                        </div>

                        <div class="col-sm-6 col-md-6 col-lg-6">
                            <div class="btn-group btn-space">
                                <button type="submit" class="btn btn-primary btn-lg"
                                        data-toggle="popover" title="Create New Mapping"
                                        data-content="Creates a new mapping between the two selected pathways">Submit
                                    Mapping
                                </button>
                                <a href="{{ url_for('curation.catalog') }}" class="btn btn-primary btn-lg"
                                   data-toggle="popover" title="Mapping Catalog"
                                   data-content="Go to the pathway mapping catalog page">
                                    Mapping Catalog
                                </a>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    {% include "meta/footer.html" %}
{% endblock %}
